<template>
  <div class="login">
    <div class="login-box">


      <div class="l-right">
        <el-form :model="loginForm" :rules="loginRules" class="login-form" ref="loginForm">
          <div class="tit_box">
            <p class="tit1">欢迎登录</p>
            <!--            <p class="tit2"> 元政数字</p>-->
            <p class="tit2"> 鲁能光大MES系统</p>
            <p class="tit3"></p>
          </div>
          <el-form-item prop="username">
            <el-input auto-complete="off" placeholder="账号" type="text" v-model="loginForm.username">
              <svg-icon class="el-input__icon input-icon" icon-class="user" slot="prefix"/>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input @keyup.enter.native="handleLogin" auto-complete="off"
                      placeholder="密码" type="password" v-model="loginForm.password">
              <svg-icon class="el-input__icon input-icon" icon-class="password" slot="prefix"/>
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaOnOff">
            <el-input @keyup.enter.native="handleLogin" auto-complete="off" placeholder="验证码"
                      style="width: 63%" v-model="loginForm.code">
              <svg-icon class="el-input__icon input-icon" icon-class="validCode" slot="prefix"/>
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
            </div>
          </el-form-item>
          <p style="display: flex;justify-content: space-between;height: 1.5em;">
            <el-checkbox style="margin:0px 0px 25px 0px;" v-model="loginForm.rememberMe">记住密码</el-checkbox>
          </p>

          <el-form-item class="sub_btn" style="width:100%;margin-bottom:10px;">
            <el-button :loading="loading" @click.native.prevent="handleLogin" size="medium"
                       style="width:100%;" type="primary">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
          <p style="color: #4b5b62;font-size: 14px;">
            <!--温馨提示：浏览器建议使用<a style="color: blue;font-weight: bold;" href="https://www.google.cn/intl/zh-CN/chrome/" target="_blank">
            谷歌/Google Chrome</a> 、360浏览器极速模式、搜狗浏览器极速模式及其他国产浏览器使用极速模式-->
            Copyright © 2024 鲁能光大MES系统 V1.0.0
          </p>
        </el-form>

      </div>
      <div class="l-left">
        <img src="../assets/login/bg_img.png" style="width: 100%;height: 100%">
      </div>
    </div>
  </div>
</template>

<script>
    import {getCodeImg} from '@/api/login'
    import Cookies from 'js-cookie'
    import {encrypt, decrypt} from '@/utils/aes'

    export default {
        name: 'Login',
        data() {
            return {
                codeUrl: '',
                loginForm: {
                    username: '',
                    password: '',
                    rememberMe: false,
                    code: '',
                    uuid: ''
                },
                loginRules: {
                    username: [
                        {required: true, trigger: 'blur', message: '请输入您的账号'}
                    ],
                    password: [
                        {required: true, trigger: 'blur', message: '请输入您的密码'}
                    ],
                    code: [{required: true, trigger: 'change', message: '请输入验证码'}]
                },
                loading: false,
                // 验证码开关
                captchaOnOff: true,
                // 注册开关
                register: false,
                redirect: undefined
            }
        },
        watch: {
            $route: {
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        created() {
            this.getCode()
            this.getCookie()
        },
        methods: {
            getCode() {
                getCodeImg().then(res => {
                    this.captchaOnOff = res.captchaEnabled === undefined ? true : res.captchaEnabled
                    if (this.captchaOnOff) {
                        this.codeUrl = 'data:image/gif;base64,' + res.img
                        this.loginForm.uuid = res.uuid
                    }
                })
            },
            getCookie() {
                const username = Cookies.get('username')
                const password = Cookies.get('password')
                const rememberMe = Cookies.get('rememberMe')
                this.loginForm = {
                    username: username === undefined ? this.loginForm.username : decrypt(username, ''),
                    password: password === undefined ? this.loginForm.password : decrypt(password, ''),
                    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
                }
            },
          handleLogin() {
            let that = this
            this.$refs.loginForm.validate(valid => {
              if (valid) {
                that.loading = true
                if (this.loginForm.rememberMe) {
                  Cookies.set('username', this.loginForm.username, { expires: 30 })
                  Cookies.set('password', encrypt(that.loginForm.password), { expires: 30 })
                  Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
                } else {
                  Cookies.remove('username')
                  Cookies.remove('password')
                  Cookies.remove('rememberMe')
                }
                this.$store.dispatch('Login', that.loginForm).then(() => {
                  this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                }).catch(() => {
                  this.loading = false
                  this.getCode()
                })
              }
            })
          },
            /*handleLogin() {
                let that = this;
                that.$refs.loginForm.validate(valid => {
                    let username1 = that.loginForm.username;
                    let password1 = that.loginForm.password;
                    that.loginForm.username = encrypt(username1, '');
                    that.loginForm.password = encrypt(password1, '');
                    if (valid) {
                        that.loading = true
                        if (that.loginForm.rememberMe) {
                            Cookies.set('username', that.loginForm.username, {expires: 30})
                            Cookies.set('password', that.loginForm.password, {expires: 30})
                            Cookies.set('rememberMe', that.loginForm.rememberMe, {expires: 30})
                        } else {
                            Cookies.remove('username')
                            Cookies.remove('password')
                            Cookies.remove('rememberMe')
                        }
                        that.$store.dispatch('Login', that.loginForm).then(() => {
                            that.$router.push({path: that.redirect || '/'}).catch(() => {
                            })
                        }).catch(() => {
                            that.loading = false
                            that.loginForm.username = username1;
                            that.loginForm.password = password1;
                            if (that.captchaOnOff) {
                                that.getCode()
                            }
                        })
                    }
                })
            },*/

        }
    }
</script>


<style lang="scss" rel="stylesheet/scss" scoped>


  .login {
    height: 100%;
    background-image: url("../assets/login/bg.png");
    background-size: 100% 100%;
    position: relative;
  }

  .logo-type {
    position: absolute;
    top: 10%;
    left: 40%;
    transform: translate(-50%, -50%);
  }


  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 375px;
    padding: 25px 25px 5px 25px;
    margin: 0 auto;


    .tit_box {
      width: 100%;
      padding: 50px 0;
      box-sizing: border-box;

      .tit1 {
        font-size: 40px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: rgba(16, 26, 136, 0.75);
        margin: 0;
      }

      .tit2 {
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #9289A6;
        text-align: left;
        margin: 10px 0;
      }

      .tit3 {
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #9289A6;
        text-align: right;
        margin: 0;
      }

    }

    .sub_btn {
      height: 45px;

      .el-form-item--medium .el-form-item__content {
        height: 45px;
      }
    }

    .el-input {
      height: 45px;

      input {
        height: 45px;
      }
    }

    .input-icon {
      height: 40px;
      width: 20px;
      margin-left: 2px;
      margin-top: 3px;
    }
  }


  .login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .login-code-img {
    height: 38px;
  }


  .login_btn {
    display: block;
    margin: 0 auto;
  }


  .login-box {
    width: 1052px;
    height: 700px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .l-left {
    width: 700px;
    /*background: rgba(44, 166, 255, 0.8);*/
  }

  .l-right {
    width: 500px;
    background: #ffffff;
    position: relative;
  }

  .ecode {
    width: 120px;
    height: 100px;
    margin: 25px auto 0 auto;
    position: absolute;
    bottom: -75px;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  .scroll-style::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .scroll-style::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }

  .scroll-style::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }


  .footer-login {
    width: 100%;
    height: 55px;
    line-height: 55px;
    /*background: rgba(255, 255, 255, 0.6);*/
    text-align: center;
    /* position: absolute;
     bottom: 0;*/
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #999999;
  }


  @media screen and (max-width: 1366px) {

  }

  @media screen and (min-width: 1367px) and (max-width: 1920px) {
    .login-box {
      width: 1055px;
      height: 600px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 65%;
      transform: translate(-50%, -50%);
      border-radius: 20px;
      overflow: hidden;

      .tit_box {
        width: 100%;
        padding: 30px 0;
        box-sizing: border-box;
      }
    }
  }


  @media screen and (min-width: 1920px) {

    .login-box {
      width: 1200px;
      height: 700px;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 65%;
      transform: translate(-50%, -50%);
      border-radius: 20px;
      overflow: hidden;
    }
  }
</style>

<style>
  .login-box .el-input--medium .el-input__inner {
    height: 45px;
  }

  .sub_btn .el-form-item--medium .el-form-item__content {
    height: 45px;
  }

  .sub_btn .el-button--primary {
    height: 45px;
    /*box-shadow: 0px 5px 15px 0px rgba(50, 136, 35, 0.5);*/
    box-shadow: 0px 5px 15px 0px rgba(20, 57, 136, 0.5);
    /*background: #328823 !important;*/
    border: none;
  }
</style>
